Sitemap 是 SEO 中的一個小環節，主要是讓 Google 能方便爬到所有的頁面資訊。

Sitemap

開始設定前，需要先安裝 sitemap 套件

npm install --save-dev sitemap

環境設定

Sitemap 是屬於 server 端的文件，所以這次會用到之前簡單帶過沒介紹到的 server 配置。

1. 在專案根目錄建立 server 資料夾。
2. 在 server 資料夾內再建立一個 routes 資料夾。
3. 在 routes 資料夾內建立 sitemap.xml.ts 檔案，後面會依據這個檔案來生成 sitemap.xml。
4. 依照官方文件的範例來修改 sitemap.xml.ts

import { serverQueryContent } from '#content/server'
import { SitemapStream, streamToPromise } from 'sitemap'

export default defineEventHandler(async (event) => {
  // Fetch all documents
  const docs = await serverQueryContent(event).find()
  const sitemap = new SitemapStream({
    hostname: 'https://example.com'
  })

  for (const doc of docs) {
    sitemap.write({
      url: doc._path,
      changefreq: 'monthly'
    })
  }
  sitemap.end()

  return streamToPromise(sitemap)
})

5. 完成後，專案上線時就可以透過 https://網域位置/sitemap.xml 找到專案的 Sitemap 資訊了。

SSG

如果是使用 nuxt generate 來發佈靜態網站，則需要修改 nuxt.config 來預渲染 sitemap 資訊。

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  nitro: {
    prerender: {
      routes: ['/sitemap.xml']
    }
  }
})